<template>
    <div class="box-car-manage">
        <div class="btn-add">
            <el-button size="medium" type="primary" @click="add">新增商家</el-button>
        </div>

        <el-table :data="tableData" stripe style="width: 100%;text-align:left">
            <el-table-column prop="id" label="ID" width="50"></el-table-column>
            <el-table-column prop="merchantName" label="名称"></el-table-column>
            <el-table-column prop="appid" label="APPID"></el-table-column>
            <el-table-column prop="secret" label="SECRET"></el-table-column>
            <el-table-column prop="phone" label="联系人手机号"></el-table-column>
            <el-table-column prop="mail" label="联系人邮箱"></el-table-column>
            <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="编辑联系方式" :visible.sync="showDialog">
            <el-form :model="formData">
                <el-form-item label="手机号码" label-width="120px">
                    <el-input v-model="formData.phone" auto-complete="off" style="width:300px"></el-input>
                </el-form-item>
                <el-form-item label="电子邮箱" label-width="120px">
                    <el-input v-model="formData.email" auto-complete="off" style="width:300px"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="edit">确 定</el-button>
            </div>
        </el-dialog>
    </div>

</template>

<script>
import vPop from "./common/pop.vue";
import toast from "../assets/js/toast.js";
import validForm from "../assets/js/valid.js";
export default {
  data() {
    return {
      isShowPop: false,
      tableData: [],
      formData: {
        phone: "",
        email: ""
      },
      merchantId: null,
      editType: 1,
      showDialog: false
    };
  },
  methods: {
    handleEdit(index, row) {
      this.showDialog = true;
      this.merchantId = row.id;
    },
    add() {
      this.$notify.error({
        title: "错误",
        message: "没有添加商家权限"
      });
    },
    //编辑按钮
    edit() {
      let self = this;
      let msg = this.valid();
      if (msg) {
        this.$notify.error({
          title: "表单填写错误",
          message: msg
        });
        return;
      }
      fetch("/api/admin/editmerchant", {
        method: "POST",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        body:
          "id=" +
          self.merchantId +
          "&phone=" +
          self.formData.phone +
          "&email=" +
          self.formData.email
      })
        .then(response => response.json())
        .then(res => {
          if (res.status == 100) {
            self.showDialog = false;
            self.getMerchantList();
          }
        })
        .catch(err => console.log("Oh, error", err));
    },
    //校验表单
    valid() {
      let validtor = new validForm();
      validtor.add(this.formData.phone, [
        {
          rule: "isEmpty",
          msg: "电话号码格式不正确"
        }
      ]);
      validtor.add(this.formData.email, [
        {
          rule: "isMail",
          msg: "邮箱格式不正确"
        }
      ]);
      return validtor.start();
    },
    getMerchantList() {
      let self = this;
      fetch("/api/admin/merchantlist")
        .then(response => response.json())
        .then(data => {
          self.tableData = data.data;
        })
        .catch(err => console.log("Oh, error", err));
    }
  },
  components: {},
  created() {
    this.getMerchantList();
  }
};
</script>

<style lang='scss'>
@import "../assets/scss/common.scss";
@import "../assets/scss/car.scss";
</style>
